<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Sản Phẩm</title>
		<link href="ctsp-styles.css" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" href="../favicon.ico"> 
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/modernizr.custom.63321.js"></script>
  
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="js/bjqs-1.3.min.js"></script>
        	<script type="text/javascript">
    function validateForm() {
       
        var email=document.forms["myForm"]["email"].value;
        var aCong=email.indexOf("@");
        var dauCham = email.lastIndexOf(".");
        if ((aCong<1) || (dauCham<aCong+2) || (dauCham+2>email.length)) {
            alert("Email bạn điền không chính xác");
            return false;
        }
    }
</script>

	</head>
	<body>
	 <jsp:useBean id="vidu" scope = "request" class = "controler.ctsanpham" />
	<%
	vidu.doGet(request, response);
	%>
	<jsp:useBean id="binhluan" scope = "request" class = "controler.listBinhluan"/>
	<%
	binhluan.doGet(request, response);
	%>
	<div class="giakm"><strong>Giá:<br><a style="text-decoration: line-through;color:#333"> ${listctsp.get(0).getGiaban()/(1-(listctsp.get(0).getDiscount()/100)) }đ </a></strong></div>
	<div class="kmgia"><a style="font-family:arial;">Discount:</a><br>${listctsp.get(0).getDiscount() } </div>
	<div class="soluongsp"><a style="font-family:arial;">Số lượng:</a><br>${listctsp.get(0).getSoluong() } </div>
	<div class="soluongdm"><a style="font-family:arial;">Số lượng đã mua:</a><br>${listctsp.get(0).getSoluongdamua() }</div>
	<h1 id="tensp" class="product-title" style="font-family:Comic Sans;color:#555;margin-top:45px;">${listctsp.get(0).getTensp() }</h1>
	<div class="gia" ><strong style="font-family:arial;font-size: 20px;">Chỉ còn:</strong><br>
	<strong style="font-family:Comic Sans;font-size: 50px;">${listctsp.get(0).getGiaban() }đ</strong></div>
	<div class="hinhctsp">
	<form method = "post" action="ShoppingCart.jsp">
	<input type = hidden name = cartAction value = 'addnew'>
	<input type = hidden name = masp value = '${listctsp.get(0).getMasp() }'>
	<input type = hidden name = gia value = '${listctsp.get(0).getGiaban() }'>
	<input type = hidden name = tensp value = '${listctsp.get(0).getTensp() }'>
	<div style="font-size: 25px;" class="them"><input type = submit value = "MUA NGAY"></div>
	</form>
	</div>
	
	
	<div class="bl">
    <h1 class="product-title" style="font-family:Comic Sans;color:#555;margin-top:45px;">Bình luận của bạn:</h1>
        <table class="table-bordered">                                 
        <tbody style="font-family:arial">
            <c:forEach items="${listbl}" var="listbl" >
                <tr>
                    <td>${listbl.tennguoibl} ( ${listbl.email} )</td>
                    <td>${listbl.noidung}</td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
    </div>
                <div id="banner-slide">

                <ul class="bjqs">
                <li><center><img border = 0 src=${listctsp.get(0).getUrlhinh()}></center></li>
                <li><center><img border = 0 src=${listctsp.get(0).getUrlhinh2()}></center></li>
                <li><center><img border = 0 src=${listctsp.get(0).getUrlhinh3()}></center></li>
                </ul>

                </div>

            <script>
                jQuery(document).ready(function ($) {

                    $('#banner-slide').bjqs({
                        animtype: 'slide',
                        height: 320,
                        width: 620,
                        responsive: true,
                        randomstart: true
                    });

                });
            </script>
            <jsp:include page="header.jsp" />
		<div id="background1">
			<div id="gia-hinh"><img width="40%" src="images/Tag.png"></div>
			<div id="Background"><img src="images/Background.png"></div>
			<div id="Layer36"><img src="images/Layer36.png"></div>
			<div id="Layer12"><img src="images/Layer12.png"></div>
			<div id="Layer2copy"><img src="images/Layer2copy.png"></div>
			<div id="Layer19"><img src="images/Layer19.png"></div>
			<div id="Layer12copy"><img src="images/Layer12copy.png"></div>
			<div id="Layer2copy2"><img src="images/Layer2copy2.png"></div>
			<div id="Layer19copy"><img src="images/Layer19copy.png"></div>
			<div id="Layer7copy4"><img src="images/Layer7copy4.png"></div>
			<div id="gototopcopy"><a href="#"><img src="images/gototopcopy.png"></a></div>
			<div id="Layer7copy4_0"><img src="images/Layer7copy4_0.png"></div>
			<div id="gototopcopy_0"><a href="#"><img src="images/gototopcopy_0.png"></a></div>
            <div id="Layer32_1"><img src="images/Layer32.png"></div>
            <div id="layer_58_1"><img src="images/layer_58.png"></div>
            <div id="Ellipse5_1"><img src="images/Ellipse5.png"></div>
            <div id="MINPHVNCHUYNTRONGTHN_1"><img src="images/MINPHVNCHUYNTRONGTHN.png"></div>
            <div id="layer_57_1"><img src="images/layer_57.png"></div>
            <div id="Ellipse5copy_1"><img src="images/Ellipse5copy.png"></div>
            <div id="HOTLINE0988849124090_1"><img src="images/HOTLINE0988849124090.png"></div>
		</div>
        <div class="ctsp">
						<h1 class="product-title" style="font-family:Comic Sans;color:#555;margin-top:45px;margin-left: 60px;">Chi tiết sản phẩm</h1>	
                                <table class="table-bordered" id="bangthongtin" style="font-family:arial">
                                    <tr>
                	                    <td class="left"><strong>Tên</strong></td>
                                        <td  class="right">${listctsp.get(0).getTensp() }</td> 
                                                        
                                    </tr>
                                    <tr>
                	                    <td><strong>Giá</strong> </td>
                                        <td>${listctsp.get(0).getGiaban() }</td>                
                                    </tr>
                                    <tr>
                	                    <td><strong>Mô tả</strong> </td>
                                        <td>${listctsp.get(0).getMota()}</td>                
                                    </tr>
                                    <tr>
                	                    <td><strong>Discount</strong></td>
                                        <td>${listctsp.get(0).getDiscount()}</td>                
                                    </tr>
                                    <tr>
                	                    <td><strong>Thương hiệu</strong></td>
                                        <td>${listctsp.get(0).getThuonghieu()}</td>                
                                    </tr>
                                  
                                    <tr>
                	                    <td><strong>Số lượng</strong></td>
                                        <td>${listctsp.get(0).getSoluong()}</td>                
                                    </tr>
                                 </table>

                            </div>  				
      
        <div class="sanphamcungloai">
        <h1 class="product-title" style="font-family:Comic Sans;color:#555;margin-top:45px;">Sản Phẩm Cùng Loại</h1>
						<div class="hinhspcl">
							<div class="new_prod_box" style="padding:10px 6px 35px;">
									<div class="related_prod_bg">
						                <div class="related_prod_img">
						                <a href="#"><img src="${listcungloai.get(0).getUrlhinh() }" class="thumb"></a>
						                <a href="" style="font-size:14px;padding: 5px 0px 2px;">${listcungloai.get(0).getTensp()}</a>
						                <a style="color:red;font-size:14px;padding:0px">Giá:${listcungloai.get(0).getGiaban() } Vnđ</a>
						                </div>
						
					
					                </div>
						
							</div>
							<div class="new_prod_box" style="padding:10px 6px 35px;">
									<div class="related_prod_bg">
						                <div class="related_prod_img">
						                <a href="#"><img src="${listcungloai.get(1).getUrlhinh() }" class="thumb"></a>
						                <a href="" style="font-size:14px;padding: 5px 0px 2px;">${listcungloai.get(1).getTensp()}</a>
						                <a style="color:red;font-size:14px;padding:0px">Giá:${listcungloai.get(1).getGiaban() } Vnđ</a>
						                </div>
						
					
					                </div>
						
							</div>
							<div class="new_prod_box" style="padding:10px 6px 35px;">
									<div class="related_prod_bg">
						                <div class="related_prod_img">
						                <a href="#"><img src="${listcungloai.get(2).getUrlhinh() }" class="thumb"></a>
						                <a href="" style="font-size:14px;padding: 5px 0px 2px;">${listcungloai.get(2).getTensp()}</a>
						                <a style="color:red;font-size:14px;padding:0px">Giá:${listcungloai.get(2).getGiaban() } Vnđ</a>
						                </div>
						
					
					                </div>
						
							</div>
							<div class="new_prod_box" style="padding:10px 6px 35px;">
									<div class="related_prod_bg">
						                <div class="related_prod_img">
						                <a href="#"><img src="${listcungloai.get(3).getUrlhinh() }" class="thumb"></a>
						                <a href="" style="font-size:14px;padding: 5px 0px 2px;">${listcungloai.get(3).getTensp()}</a>
						                <a style="color:red;font-size:14px;padding:0px">Giá:${listcungloai.get(3).getGiaban() } Vnđ</a>
						                </div>
						
					
					                </div>
						
							</div>
							
						</div>
                            </div>
       <div class="thaoluan">
		<h1 class="product-title" style="font-family:Comic Sans;color:#555;margin-top:45px;">Thảo luận</h1>			
			<div class="fb-comments" data-href="http://localhost:8080/BigDeal/chitietsanpham.html" data-width="960" data-numposts="5" data-colorscheme="light"></div>
						
	   </div>
	   <script>(function (d, s, id) {
                                var js, fjs = d.getElementsByTagName(s)[0];
                                if (d.getElementById(id)) return;
                                js = d.createElement(s); js.id = id;
                                js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
                                fjs.parentNode.insertBefore(js, fjs);
                                }(document, 'script', 'facebook-jssdk'));

    </script>
    <div class="nhanxet">
        <h1 class="product-title" style="font-family:Comic Sans;color:#555;margin-top:45px;">Gửi nhận xét của bạn</h1>
                            <div class="nhanxet2">
    <form method = POST action = "RatingSave" name="myForm" onsubmit="return validateForm()">
    <ul >
							<li>
							<span style="font-family:Arial;font-size: 16px;">Tên khách hàng:</span>
							<input type = text name = "tenkhachhang" required>
							<span style="font-family:arial;font-size: 16px;">Email:</span>
							<input type = text name = "email" required>
							</li>
							<li>
							<span style="font-family:arial;font-size: 16px;">Nội dung:</span><br>
							<textarea name ="noidung" rows="3" cols="110" required></textarea>
							</li>
   						 <input type = submit value = "Gửi" name="guibinhluan">
    					 <input type = hidden name = masp value = '${listctsp.get(0).getMasp() }'>
    	</ul>
    </form>
    </div>
    </div>
 </body>
 </html>